<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue入门</title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<!-- Vue容器 -->
		<div id="app">
			<!-- mustache模板语法 -->
			<div>{{ a }}</div>
			<div>{{ number }}</div>
		</div>
		<script>
		  const { createApp, ref } = Vue // 解构赋值
		  const app = createApp({
			  setup() {
				  // 定义的数据部分
				  let a = 1 // 非响应式数据
				  const number = ref(1) // 响应式数据
				  setTimeout(() => { 
					  a = 5
					  number.value = 2
				  }, 3000)
				  // ES6对象简写形式：属性和值相同的时候
				  return { a, number }
			  }
		  })
		  app.mount('#app')
		</script>
	</body>
</html>